<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <!-- 套css -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
      integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
      crossorigin="anonymous"
    />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
    <title>学生党小陈Chan|软件</title>
  </head>
   <body>
  <!-- 工具栏-->
  <div class="mdui-container">
  <div class="mdui-toolbar">
  <button class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a></button>
 <span class="mdui-typo-title">学生党小陈Chan|软件</span>
  <div class="mdui-toolbar-spacer"></div>
   </div>
  <div>
  <div class="mdui-drawer" id="left-drawer">
  <ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
  <!--侧滑内容(图片)-->
    <div class="mdui-list-item-avatar"><img src="pic/chan.jpg"/></div>
    <div class="mdui-list-item-content">学生党小陈|Chan</div>
  </li>
   <a href="/index.html"><li class="mdui-list-item mdui-ripple">首页</li></a>
  <li class="mdui-list-item mdui-ripple mdui-list-item-active">开发的软件</li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">关于本站</li>
  <li class="mdui-subheader">广告</li>
</ul>
</div>
<div class="mdui-card">
  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">WearTools</div>
    <div class="mdui-card-header-subtitle">安卓手表助手</div>
  </div>
   <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">安卓软件</div>
    <div class="mdui-card-primary-subtitle">最近更新于：2021年7月3日</div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">了解</button>
    </div>
</div>

<div class="mdui-card mdui-m-t-2">
  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Da-不MD的iapp助手</div>
    <div class="mdui-card-header-subtitle">iapp开发助手</div>
  </div>
   <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">安卓软件</div>
    <div class="mdui-card-primary-subtitle">最近更新于：2021年6月</div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">了解</button>
    </div>
</div>
<script
      src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
      integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
      crossorigin="anonymous"
    ></script>